<template>
  <div class="community-card bg-white/80 backdrop-blur-lg rounded-2xl shadow-md overflow-hidden p-6 transition-all duration-300 ease-in-out">

    <div class="flex items-center justify-between mb-5">
      <h2 class="text-xl font-bold text-gray-800 flex items-center">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
        </svg>
        <span>加入的社区</span>
      </h2>

      <div v-if="communities.length > 0" class="flex items-center space-x-1">
        <button @click="previousPage" :disabled="currentPage === 1" class="pagination-btn">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" /></svg>
        </button>
        <span class="text-sm font-medium text-gray-600 w-8 text-center">{{ currentPage }}/{{ totalPages }}</span>
        <button @click="nextPage" :disabled="currentPage === totalPages" class="pagination-btn">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
        </button>
      </div>
    </div>

    <div v-if="communities.length > 0" class="space-y-3">
      <div
        v-for="community in displayedCommunities"
        :key="community.id"
        class="community-item group"
        @click="handleCommunityClick(community.id)"
      >
        <div class="flex-shrink-0 mr-4">
          <img :src="community.avatar" :alt="community.name" class="w-14 h-14 rounded-full object-cover border-2 border-white shadow-md transition-transform duration-300 group-hover:scale-110">
        </div>

        <div class="flex-1 min-w-0">
          <div class="flex justify-between items-start">
            <div class="flex items-center">
              <!-- 名称 --->
              <p class="font-semibold text-gray-800 truncate pr-2">{{ community.name }}</p>
              <!-- 人数 --->
              <div class="flex items-center text-sm text-gray-600 flex-shrink-0">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                  <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
                  <circle cx="9" cy="7" r="4"></circle>
                  <path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
                  <path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
                </svg>
                <span>{{ community.memberCount }}</span>
              </div>
            </div>

          </div>
          <p class="text-sm text-gray-500 mt-1">加入时间: {{ formatJoinTime(community.joinTime) }}</p>
        </div>

        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400 group-hover:text-green-500 transition-colors duration-300 opacity-0 group-hover:opacity-100 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /></svg>
      </div>
    </div>

    <div v-else class="text-center py-8">
      <div class="flex justify-center items-center mb-5">
        <div class="w-20 h-20 rounded-full bg-gray-200/60 flex items-center justify-center">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" /></svg>
        </div>
      </div>
      <p class="text-lg font-semibold text-gray-700 mb-4">您还未加入任何社区</p>
      <button
        @click="navigateToDiscover"
        class="discover-btn">
        加入社区!
      </button>
    </div>
  </div>
</template>

<script>
import { joinedCommunities } from '@/mock/user/joinedCommunities.js';

export default {
  name: 'JoinedCommunities',
  data() {
    return {
      communities: joinedCommunities,
      currentPage: 1,
      itemsPerPage: 3,
    };
  },
  computed: {
    totalPages() {
      if (!this.communities || this.communities.length === 0) return 1;
      return Math.ceil(this.communities.length / this.itemsPerPage);
    },
    displayedCommunities() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.communities.slice(start, end);
    }
  },
  methods: {
    formatJoinTime(timeString) {
      const joinDate = new Date(timeString);
      const year = joinDate.getFullYear();
      const month = String(joinDate.getMonth() + 1).padStart(2, '0'); // 月份从0开始，需要+1并补零
      const day = String(joinDate.getDate()).padStart(2, '0'); // 补零
      return `${year}-${month}-${day}`;
    },
    handleCommunityClick(communityId) {
      this.$router.push({ name: 'communityHome', query: { id: communityId } });
    },
    previousPage() {
      if (this.currentPage > 1) this.currentPage--;
    },
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
    navigateToDiscover() {
      this.$router.push({ name: 'community' });
    }
  }
};
</script>

<style scoped>
.community-card {
  font-family: 'Inter', sans-serif;
}

.community-item {
  display: flex;
  align-items: center;
  padding: 0.75rem;
  border-radius: 0.75rem;
  cursor: pointer;
  background-color: rgba(249, 250, 251, 0.6);
  transition: all 0.3s ease;
}

.community-item:hover {
  transform: translateY(-4px) scale(1.02);
  background-color: white;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* Pagination Button Styling */
.pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 9999px;
  background-color: rgba(0, 0, 0, 0.05);
  color: #4b5563;
  transition: all 0.2s ease-in-out;
}

.pagination-btn:not(:disabled):hover {
  background-color: #10b981; /* emerald-500 */
  color: white;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Empty State Button */
.discover-btn {
  background-image: linear-gradient(to right, #53dd49, #3cdd58); /* sky-500 to cyan-400 */
  color: white;
  font-weight: 600;
  padding: 0.6rem 1.5rem;
  border-radius: 9999px;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3);
  transition: all 0.3s ease;
}

.discover-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 20px rgba(14, 165, 233, 0.4);
}
</style>